<template>
    <el-card shadow="hover">
        <template #header>
            <div class="card-header" style="cursor:pointer;" @click="viewCollected">
                <span>{{data.name}}</span> <span>[{{data.docTotal}}篇]</span>
                <!-- <el-button class="button" type="text">操作按钮</el-button> -->
            </div>
        </template>
        <div v-for="doc in data.docLites" :key="doc" class="text item" style="padding:0px;">
            <el-row style="cursor:pointer;" @click="viewDoc(doc.id)">
                <el-col :span="19" style="color:#888;font-size:14px">
                    <i class="el-icon-edit"></i> {{ ellipsis(doc.title) }}
                </el-col>
                <el-col :span="5" style="color:#f88;font-size:12px">
                    {{doc.relativeUpdateTime}}
                </el-col>
            </el-row>
        </div>
    </el-card>
</template>

<script>
export default {
    props: {
        data: Object
    },
    methods: {
        ellipsis(value) {
            let textLength = 30;
            if (!value) return '';
            if (value.length > textLength) {
                return value.slice(0, textLength) + '...';
            }
            return value;
        },
        viewCollected() {
            this.$router.push({ name: 'collected', params: { collectedId: this.data.id, docId: '_intro' } });
        },
        viewDoc(id) {
            this.$router.push({ name: 'collected', params: { collectedId: this.data.id, docId: id } });
        }
    }
};
</script>

<style>
.el-main {
    /* background-color: #e9eef3; */
    /* color: #333; */
    text-align: left;
}
.el-card {
    margin: 10px;
}
</style>